<template>
  <div v-drag>
    <div @click="closePopup(false)" class="mask"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '确认' : '新增' }}回收单</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <div class="g-mt-10">
            <i @click="addVos()" class="el-icon-circle-plus-outline addlist"></i>
          </div>
        </div>
        <div class="line">
          <!--<span class="lab"></span>-->
          <div :class="{'error_border':tip_num===1}" style="width: 100%">
            <div class="line_item" v-for="(item,index) in itemList">
              <div>
                <el-select filterable placeholder="请选择商品" v-model="item.productId"
                           value-key="id">
                  <el-option
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    v-for="(item,index) in productList">
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input onKeypress="return(/[\d.]/.test(String.fromCharCode(event.keyCode)))"
                          :min="0"
                          placeholder="商品数" type="Number" v-model.number="item.numbers">
                  <template slot="prepend">商品数</template>
                </el-input>
              </div>
              <div>
                <el-input onKeypress="return(/[\d.]/.test(String.fromCharCode(event.keyCode)))"
                          :min="0"
                          placeholder="回收数" type="Number" v-model.number="item.returnNumber">
                  <template slot="prepend">回收数</template>
                </el-input>
              </div>
              <span>
                <i @click="delVos(index)" class="el-icon-remove-outline"></i>
              </span>
            </div>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="sendInfo">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {listAllData} from "@/api/config/product";
  import {getRecycleOrderDetail, recycleOrderConfirm} from "@/api/basic/warehouse/recycleOrder";

  export default {
    props: ['mid','rid'],
    data() {
      return {
        warehouseName: '',
        warehouseId: '',
        productName: '',
        productId: '',
        productPhoto: '',
        numbers: 0,
        returnNumber: 0,
        itemList: [],
        productList: [],
        infoTip: '',
        tip_num: '',
        loading: false
      }
    },
    mounted() {
      if (this.mid) {
        this.getDetail();
      }
      this.getAllProduct();
    },
    methods: {
      getDetail() {
        let that = this;
        this.loading = true;
        getRecycleOrderDetail(this.rid).then(res => {
          if (res.length>0){
            that.itemList=res;
          } else {
            that.itemList=[
              {
                numbers: 0,
                productId: '',
                returnNumbers: 0
              }
            ]
          }

          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      },


      //商品列表
      getAllProduct() {
        let that = this;
        listAllData().then(res => {
          that.productList = res ? res : [];
        }).catch((e) => {
          that.productList = [];
        })
      },

      setData(obj) {
        this.warehouseName = obj.warehouseName;
        this.warehouseId = {id: obj.warehouseId};
        this.productName = obj.productName;
        this.productId = {productId: obj.productId};
        this.productPhoto = obj.productPhoto;
        this.numbers = obj.numbers ? Number(obj.numbers) : 0;
        this.returnNumber = obj.returnNumber ? Number(obj.returnNumber) : 0;
      },


      sendInfo() {
        let that = this;
        that.loading = true;
        let data = {
          productInfo:that.itemList,
        };
        data.id = that.mid;
        recycleOrderConfirm(data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      },


      isEnough(data) {
        let num = 0;
        let that = this;
        for (let i = 0; i < data.length; i++) {
          if (data[i].productId) {
            num += data[i].numbers;
            data[i].returnNumbers=data[i].returnNumber
          } else {
            if (data.length > 1) {
              that.delVos(i);
              i--
            }
          }
        }
        return num;
      },


      delVos(index) {
        this.itemList.splice(index, 1)
      },

      addVos() {
          this.itemList.unshift({
            numbers: 0,
            productId: '',
            returnNumbers: 0
          })
      },


      setTip(num, text) {
        this.tip_num = num;
        this.infoTip = text
      },

      // 关闭
      closePopup(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    }
  }
</script>

<style scoped>
  .line_item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
  }

  .line .line_item > div {
    width: 27% !important;
  }

  .line .line_item > span{
    display: block;
    width: 30px;
  }

  .line .line_item i, .addlist {
    font-size: 25px;
    color: #6687f9;
    cursor: pointer;
  }
</style>
